<template>
    <el-dialog v-model="authFormVisible" width="520px" :before-close="handleClose" title="驳回">
        <el-form ref="infoFormRef" :model="infoForm" status-icon :rules="formRules" class="ruleForm" label-width="150px">
            <el-form-item label="驳回机构:" readonly>
                <el-input v-model="userInfo.companyName" class="span8" :disabled="true"/>
            </el-form-item>
            <el-form-item  prop="audit_comment" label="驳回意见:">
                <el-input v-model="infoForm.audit_comment" placeholder="请输入" type="textarea" class="span8"/>
            </el-form-item>
            <el-form-item label="驳回人:">
                <el-input v-model="userInfo.name" class="span8" :disabled="true"/>
            </el-form-item>
            <el-form-item label="联系方式:">
                <el-input v-model="userInfo.telephone" class="span8" :disabled="true"/>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button :loading="isSaveLoading" type="primary" @click="handleSubmit"> 确认驳回 </el-button>
                <el-button @click="handleClose"  type="default">返回</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { useStore } from 'vuex';

const authFormVisible = ref(false)
const infoForm = ref()
const isSaveLoading = ref(false)
const store = useStore()
const userInfo = computed(() => store.state.user.userInfo)
const emit = defineEmits(['handleSubmit']);
const infoFormRef = ref();

const init = (info: any) => {
    authFormVisible.value = true
    infoForm.value = info
}

const formRules = {
    audit_comment: [
        {
            'required': true,
            'message': `请输入驳回意见`,
            'trigger': `blur`
        },{
            'max': 140,
            'message': `长度不能超过140字`,
            'trigger': `blur`
        }
    ]
}

const handleClose = () => {
    authFormVisible.value = false
    isSaveLoading.value = false
}

defineExpose({
  init,
  handleClose
})

const handleSubmit = () => {
    infoFormRef.value.validate(async (valid: boolean) => {
        if (valid) {
            isSaveLoading.value = true;
            emit('handleSubmit', infoForm)
        }
    })
}

</script>
<style lang='scss' scoped>
$textColor: #262626;
.dialog-footer button:first-child {
  margin-right: 10px;
}

</style>